<template>
	<div class="new-modal" style="">
		<div class="new-modal-title" style="font-size: 17px; position: absolute; width: 100%; z-index: 999;">
			<i class="ion-chevron-left return" @click="genderDelete()"></i> 筛选
			<i class="right-submit" @click="genderSubmit()">确定</i>
		</div>
		<div class="mouchs" style="padding-top: 44px;overflow-y: auto; height: 100%;">
			<div class="mouchs-box">
				<div class="mouchs-list">
					<div class="mouchs-item">						
						<div class="mouchs-section">
							<ul class="mouchs-section-style mouchs-section-price">
								<li v-for="item in styleList" :class="{on:item.id == styleParams.id}" @click="styleChange(item)" >{{item.name}}</li>
							</ul>
						</div>
					</div>
					<div class="mouchs-item">
						<div class="mouchs-title">
							<h5>自定义价格</h5>
							<em>/单位：万元|</em>		
							<span v-if="mathMin==age.min&&mathMax==age.max||age.stateA==age.stateB&&age.stateB==age.max">不限</span>
							<span v-if="mathMin==age.min&&mathMax!=age.max&&age.stateA!=age.stateB">低于{{mathMax}}</span>
							<span v-if="mathMin!=age.min&&mathMax==age.max&&age.stateA!=age.stateB">大于{{mathMin}}</span>
							<span v-if="mathMin!=age.min&&mathMax!=age.max&&age.stateA!=age.stateB">{{`${mathMin}~${mathMax}之间`}}</span>
							<span v-if="mathMax!=age.max&&age.stateA==age.stateB">{{mathMax}}</span>
						</div>
						<div class="mouchs-section">
							<section>
								<div class="range-list">
									<ul >
										<li v-for="item in age.Arrays" :class="{on:item>=mathMin&&item<=mathMax}" :style="{width:100/(age.max/age.step+1)+'%'}">{{item==age.max?'不限':item}}</li>
									</ul>
								</div>
								<div class="ranges">
									<input type="range" :min="age.min" :step="age.step" :max="age.max" @change="ageA" v-model.number="age.stateA" />
									<input type="range" :min="age.min" :step="age.step" :max="age.max" @change="ageB" v-model.number="age.stateB" />
									<span class="range-block" :style="{width:Math.abs(age.stateB-age.stateA)/age.max*300+'px',left:mathMin/age.max*300+'px'}"></span>
								</div>
							</section>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {				
				age:{
					min: 0,
					max: 110,
					stateA: 0,
					stateB: 110,
					step:10,
					Arrays:[],
				},
				
				styleList:[
					{
						name:'不限',
						max:'',
						min:'',
						id:1,
					},
					{
						name:'0~3万',
						max:3,
						min:0,
						id:2,
					},
					{
						name:'3~5万',
						max:5,
						min:3,
						id:3,
					},
					{
						name:'5~10万',
						max:10,
						min:5,
						id:4,
					},
					{
						name:'10~15万',
						max:15,
						min:10,
						id:5,
					},
					{
						name:'15~20万',
						max:20,
						min:15,
						id:6,
					},
					{
						name:'20~30万',
						max:30,
						min:20,
						id:7,
					},
					{
						name:'30~50万',
						max:50,
						min:30,
						id:8,
					},
					{
						name:'50万以上',
						max:'',
						min:50,
						id:9,
					},
				],
				styleParams:{},
			}
		},
		mounted() {
			this.rangeInit()			
		},
		methods: {
			ageA(val){				
				this.age.stateA = val.target.value
				this.styleParams = ''
			},
			ageB(val){				
				this.age.stateB = val.target.value
				this.styleParams = ''
			},						
			styleChange(val){
				this.styleParams = val
				this.age.stateA = 0
				this.age.stateB = 110
				this.genderSubmit()
			},
			genderSubmit(){
				let data
				if(this.styleParams != ''){
					data = this.styleParams
				}else{
					data = {
						max:Math.max.apply(Math,[this.age.stateA,this.age.stateB])==this.age.max?'':Math.max.apply(Math,[this.age.stateA,this.age.stateB]),
						min:Math.min.apply(Math,[this.age.stateA,this.age.stateB])==this.age.min?'':Math.min.apply(Math,[this.age.stateA,this.age.stateB])
					}
				}
				console.log(data)
				this.$emit('cancel',data)
			},
			genderDelete() {
				this.$emit('cancel')
			},
			rangeInit(){
				
				for(var i = 0 ; i <= this.age.max ; i += this.age.step){
					this.age.Arrays.push(i)
				}
				
			}
		},
		created(){
			
		},
		computed:{
			
			mathMax(){
				return Math.max.apply(Math,[this.age.stateA,this.age.stateB])
			},
			mathMin(){
				return Math.min.apply(Math,[this.age.stateA,this.age.stateB])
			},
			
		}
	}
</script>
<style scoped="scoped">
	.mouchs-section-price li{border: 1px solid #999; width: 28%; margin: 2.66%; border-radius: 5px;}
	.mouchs-section-style li.on{ border-color: #FF6816;}
	.right-submit{position: absolute; right: 15px; top: 0;}
	.return{ position: absolute; left: 0; top: 0;}
</style>

